<template>
  <div class="videoIndex">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="MV" name="mvlist"></el-tab-pane>
      <el-tab-pane label="视频" name="videolist"></el-tab-pane>
    </el-tabs>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "VideoIndex",
  components: {},
  props: {},
  data() {
    return {
      activeName: "mvlist"
    };
  },
  computed: {
    user() {
      return this.$store.state.user;
    }
  },
  watch: {
    $route() {
      this.activeName = this.$route.name;
      // this.neewmusic();
    }
  },
  created() {
    this.activeName = this.$route.name;
  },
  mounted() {},
  methods: {
    handleClick(tab) {
      console.log(this.user);
      if (tab.name == "videolist" && this.user === "") {
        this.$router.push("/login");
        this.$message({
          message: "需要登录",
          type: "warning"
        });
      } else {
        this.$router.push({
          path: `/video/${tab.name}`
        });
      }
    }
  }
};
</script>

<style scoped lang="scss">
/deep/.el-carousel__indicator {
  padding: 0.9375rem 0.3125rem;
}
/deep/.container {
  width: 100%;
  height: 100%;
}
/deep/.el-tabs__nav-wrap::after {
  display: none;
}
/deep/.is-active {
  font-size: 18px;
  color: #000;
}
</style>
